콜백 함수 (코드종 강의)

자바스크립트 개념잡기 : 콜백 함수의 동기적 실행과 비동기적 실행 (코드종 강의)

콜백callback이라는 것은 이름에서 알 수 있듯이 나중에 실행하는 코드. 자바스크립트에서는 나중에 실행하는 함수. 그래서 자바스크립트에서는 콜백 함수라고 불린다.

리턴으로 함수를 쓸 수도 있고, 변수로 함수를 넣을 수도 있다. 그래서 자바스크립트는 1급 객체. (first class object)

function fakeSetTimeout(callback, delay) {
  callback(); //넘겨진 콜백을 위에서 받아와서 바로 실행
}

console.log(0)
fakeSetTimeout( function(){
    console.log('hello');
}, 0) -> 동기적인 callback, stack으로 들어감.
console.log(1);

setTimeout( function(){
    console.log('hello');
}, 1000)

‘동기적’이란 순차적인 실행. 순차적으로 된다는 것이 동기적인 것. 무조건 하나가 끝나야 뒤로 넘어가는 것.

console.log(0)
setTimeout(function() {
  console.log('hello')
}, 0)
console.log(1)

-> 결과는 0, 1, hello 따라서 setTimeout은 비동기적인 실행인 것.

-> 메인 함수가 실행이 되고, console이 실행되어 0을 찍어주고, console이 스택에서 사라진다. 그 다음에 setTimeout이란 자바스크립트 인터페이스(API)를 호출한다. 0초 뒤에 실행하는 것이 아니라 Q에다가 callback을 넣어준다. setTimeout 호출이 끝나면 main으로 돌아오고, 그 다음에 console 1이 찍히고, 메인 함수가 끝난다. 스택에서는 현재 아무 것도 없다. Q를 살피고, Q에 있던 콜백을 stack으로 데려와서 console.log을 실행하게 되고 hello가 출력한다.

핵심 : callback 나중에 실행하라고 인자로 다른 함수에게 넘겨주는 것이지만 callback을 받는 그 함수가 어떻게 받느냐에 따라서 동기적일 수도, 비동기적일 수도 있다.

외부 API에 콜백을 넘긴다하면, 바로 콜 스택에서 들어가는 것이 아니라 Q에 들어간다. ex) button의 onclick. DOM은 외부다. DOM은 자바스크립트 내부가 아니라 자바스크립트 외부에 있는 다른 세계. 버튼을 클릭하면 Q에 넣는다.

콜백을 Q에 넣냐, 아니면 지금 CALL STACK에 넣어서 바로 실행하냐에 따라 달라진다. 실행하는 함수가 Q에 들어가는지 STACK에 들어가는지는 알아둘 필요가 있다.